import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import ResponsiveImage from '@/components/ResponsiveImage'
import css from './index.module.scss'
class UserCard extends PureComponent {
    static propTypes = {
        id: PropTypes.number,
        name: PropTypes.string,
        pic: PropTypes.string,
        sign: PropTypes.string,
        fans: PropTypes.oneOfType([
            PropTypes.number,
            PropTypes.string,
        ]),
        videos: PropTypes.oneOfType([
            PropTypes.number,
            PropTypes.string,
        ]),
        showType: PropTypes.bool
    }

    static defaultProps = {
        showType: false
    }

    handleDetail = () => {
        this.props.history.push(`/space/${this.props.id}`)
    }

    render() {
        const { name, showType, fans, videos, sign, pic } = this.props
        return (
            <div className={`${css['wrap']}`} onClick={this.handleDetail}>
                <div className={css['cover']}>
                    <ResponsiveImage                             
                        src={pic}
                        size="@120w_120h_1c"
                        className={css['cover-img']}
                        round
                    >
                    </ResponsiveImage>
                </div>
                <div className={css["content"]}>
                    { showType && <div className="type"><i className="fa fa-up-zhu"></i> Up主</div> }
                    <div className={css["title"]}>{name}</div>
                    <div className="info"><span className="fans">粉丝：{fans}</span><span className="videos">视频：{videos}</span></div>
                    <div className="info">{sign}</div>
                </div>
            </div>
        )
    }
}

export default withRouter(UserCard)